<template>
    <div>
        <el-card class="box-card">
            <div class="header-box">
                <span class="title-name">耗材名称 :</span>
                <el-input class="handle-input" clearable v-model="valueName" placeholder="请输入耗材名称"></el-input>
            </div>
            <div class="header-box">
                <span class="title-name">请选择存储仓库 :</span>
                <el-select class="handle-select" clearable v-model="state" placeholder="请选择存储仓库">
                    <el-option v-for="item in repositorylist" :key="item.id" :label="item.repositoryName"
                        :value="item.id"></el-option>
                </el-select>
            </div>

            <el-button type="primary" icon="el-icon-search" @click="seled">查询</el-button>
            <el-button type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-card>
        <div class="container">
            <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
                <el-table-column type="index" label="序号" width="60" align='center'>
                    <template slot-scope="scope">
                        {{ scope.$index + (query.pageNum - 1) * query.pageSize + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="consumName" label="耗材名称" align='center'></el-table-column>
                <el-table-column prop="consumStandard" label="规格型号" align='center'></el-table-column>
                <el-table-column prop="consumUnit" label="计量单位" align='center'></el-table-column>
                <el-table-column prop="consumPrice" label="单价" align='center'></el-table-column>
                <el-table-column prop="consumTotal" label="金额" align='center'></el-table-column>
                <el-table-column label="现存库存" align='center'>
                    <template slot-scope="scope">
                        <span>{{ scope.row.consumNum - scope.row.outNum }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="consumNum" label="入库数量" align='center'></el-table-column>
                <el-table-column prop="outNum" label="出库数量" align='center'></el-table-column>
                <el-table-column prop="repositoryName" label="仓库" align='center'></el-table-column>
                <!-- <el-table-column prop="name" label="安全库存上线" align='center'></el-table-column>
                <el-table-column prop="name" label="安全库存下线" align='center'></el-table-column> -->

            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import { listByPage, repository } from '../../../api/index'
export default {

    data() {
        return {
            valueName: "", //名称
            state: "", ///状态
            query: {
                repositoryId: "",
                consumName: "",
                pageNum: 1,
                pageSize: 10,
            },
            repositorylist: [],
            pageTotal: 0,
            tableData: [],
        };
    },
    components: {
    },
    mounted() {
        this.listByPages()
        this.repositorys()
    },
    methods: {
        async repositorys() {
            const data = await repository()
            this.repositorylist = data.data.data

        },
        //查询
        seled() {
            this.query.consumName = this.valueName
            this.query.repositoryId = this.state
            this.query.pageNum = 1
            this.listByPages()
        },
        // 重置
        reset() {
            this.query.consumName = ""
            this.valueName = ""
            this.query.repositoryId = ""
            this.state = ""
            this.query.pageNum = 1
            this.listByPages()
        },

        async listByPages() {
            const data = await listByPage(this.query)
            this.tableData = data.data.data.records
            this.pageTotal = data.data.data.total
        },
        handlePageChange(val) {
            this.query.pageNum = val;
            this.listByPages()

        },
    }
};
</script>

<style scoped>
.header-box {
    display: inline-block;
}

.title-name {
    font-size: 14px;
    margin-right: 10px;
}

.handle-input {
    width: 220px;
    margin-right: 10px;
}

.handle-select {
    width: 220px;
    margin-right: 10px;
}


.table {
    width: 100%;
    font-size: 14px;
}

.mr10 {
    margin-right: 10px;
}
</style>
